<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Document</title>
</head>
<style>
    .left1 {
        float: left;
        /* width: 3% */
    }

    .icon1 {
        width: 40px;
        height: 39px;
        line-height: 38px;
        background-color: rgb(51, 122, 183);
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }

    .icon2 {
        width: 40px;
        height: 39px;
        line-height: 38px;
        background-color: white;
        border: 1px solid rgb(220, 220, 220);

        text-align: center;
    }

    .div1 {
        width: 40px;
        height: 60px;
        line-height: 60px;
        background-color: rgb(86, 173, 240);
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }

    .left2 {
        float: left;
        /* width: 3%; */

    }

    .div2 {

        width: 40px;
        height: 60px;
        background-color: white;
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }


    .number {
        height: 30px;
        line-height: 30px;
        color: rgb(95, 176, 241)
    }

    .div_name {
        color: rgb(49, 157, 181);
        font-size: 17px;
        font-weight: bold;
    }






    .main-table {
        display: flex;
        /* overflow-x: scroll; */
        width: 90%;

    }

    .frame {
        width: 400px;
        height: 300px;
        position: relative;
        top: 20px;
        ;
        left: 50%;
        border: 2px solid red;
        /* display: block;           某认就会有 */
        display: none;
        z-index: 100;
        background-color: beige;
    }

      .exist1{
          /* position: relative; */
  
        background-color: rgb(135, 209, 39);
         height: 29px;
          line-height: 29px;
           width: 125px; 
           border-top-right-radius: 10px; 
            border-top-left-radius: 10px; 
             border-bottom-right-radius: 10px;
             color: white;
             z-index: 999;
            
      }

      .exist1 .name{

      }


</style>

<body>


    <div class="left1">
        <div class="icon1"><span class="glyphicon glyphicon-dashboard"></div>
        <div class="div1">09</div>
        <div class="div1">10</div>
        <div class="div1">11</div>
        <div class="div1">12</div>
        <div class="div1">13</div>
        <div class="div1">14</div>
        <div class="div1">15</div>
        <div class="div1">16</div>
        <div class="div1">17</div>
        <div class="div1">18</div>

    </div>
    <div class="left2">
        <div class="icon2">
            <sapn class="glyphicon glyphicon-user"></sapn>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>


    </div>

    <div class="main-table"></div>


    <div class="frame">
        姓名: <input type="text"><br>
        <br>
        性别: <input type="text"><br>
        <br>
        年龄: <input type="text"><br>
        <br>
        开始时间: <input type="text" name="" id="" placeholder="格式: **:**"><br>
        结束时间: <input type="text" name="" id="" placeholder="格式: **:**"><br>
    </div>


      <div class="exist1"   draggable="true" >
          <div class="name"><span class="state"></span>郭展颜<span class="age"></span></div>
           </div>



</body>

<script>










    var data_doc = ["李莉", "唐伟", "刘京沙", "郎宇", "冯伟", "乔班", "特聘专家", "夏春蕾", "未指定医生", "李莉", "唐伟", "刘京沙", "郎宇", "冯伟", "乔班", "特聘专家", "夏春蕾", "未指定医生"];
    var div_all = document.getElementsByClassName('main-table')[0];

    for (var i = 0; i < data_doc.length; i++) {


        Div3 = document.createElement("div");
        Div3.className = "div3 ";
        Div3.style.cssText = 'float:left;'
        div_all.appendChild(Div3);

        var div_name = document.createElement("div");
        div_name.className = 'div_name';
        div_name.innerHTML = data_doc[i];
        div_name.style.cssText = '   float: left; height: 39px; line-height: 38px;text-align: center;width: 132px; background: -webkit-linear-gradient(white, rgb(231, 231, 231)); box-shadow: gray;border: rgb(167, 164, 164) solid 0.5px;border-radius: 2px;';
        Div3.appendChild(div_name);



        for (var q = 0; q < 10; q++) {

            var Div_1 = document.createElement('div');
            Div_1.className = "div_1";
            Div_1.style.cssText = ' top:39px; position: relative; height: 30px;width: 132px; border-top:  rgb(220, 220, 220) solid 0.5px;border-left:  rgb(220, 220, 220) solid 0.5px;border-right:  rgb(220, 220, 220) solid 0.5px;'

            var Div_2 = document.createElement('div');
            Div_2.className = "div_2"
            Div_2.style.cssText = ' top:39px; position: relative; height: 30px; width: 132px; border-top: rgb(240, 239, 239) solid 0.1px; border-left: rgb(220, 220, 220) solid 0.5px; border-right:  rgb(220, 220, 220) solid 0.5px; border-bottom:  rgb(220, 220, 220) solid 0.5px;'



            Div3.appendChild(Div_1)
            Div3.appendChild(Div_2)
        }


        window.onload = function () {


            var Div_1 = document.getElementsByClassName("div_1");

            for (var i = 0; i < Div_1.length; i++) {
                Div_1[i].index = i;
                Div_1[i].onclick = function (ev) {


                    //alert("元素索引为" +this.index);
                    if (document.getElementsByClassName('div_1')[this.index].innerHTML == "") {

                        var frame = document.getElementsByClassName("frame")[0];
                        frame.style.display = 'block';
                        frame.style.offsetTop = 'ev.elientLTop' + 30 + 'px';
                        frame.style.offsetRight = 'ev.elientRight' - 40 + 'px';


                        var timeNumber = 2;

                        switch (timeNumber) {
                            case 0.5:
                                height = '30px'
                                break;
                            case 1:
                                height = '60px'
                                break;
                            case 1.5:
                                height = '90px'
                                break;
                            case 2:
                                height = '120px'
                                break;
                            case 2.5:
                                height = '150px'
                                break;

                        }

                        document.getElementsByClassName('div_1')[this.index].appendChild(frame);



                    } else {
                        return false
                    }
                }
            }


        }




        // var div_one = document.getElementsByClassName("div_1")[1];

        // var div_now = document.createElement("div");
        // div_now.className = 'create';
        // div_now.style.cssText = '  background-color: rgb(135, 209, 39); height: 29px; line-height: 29px; width: 125px; border-top-right-radius: 10px;  border-top-left-radius: 10px;  border-bottom-right-radius: 10px; color: white;'
        // div_now.innerHTML = '郭展颜';

        // var div_span1 = document.createElement("span")
        // div_span1.cssText = '  float:left; color: white; line-height: 30px; text-align: center; width: 15px;height: 15px;border: 1px solid white; border-radius: 2px; margin: 4px;'
        // div_span1.innerHTML = '离';
        // div_now.appendChild(div_span1);

        // if (div_one.innerHTML == '') {
        //     document.getElementsByClassName("div_1")[1].appendChild(div_now);
        // }

        // var div_span2 = document.createElement("span");
        // div_span2.cssText = ' float:right; color: white; background-color: rgb(157, 80, 197);  border-radius: 50%; margin: 15px;'
        // div_span2.innerHTML = '儿';
        // div_now.appendChild(div_span2);

    }




    var Div_2 = document.getElementsByClassName("exist1");

    for (var i = 0; i < Div_2.length; i++) {
        Div_2[i].index = i;
        Div_2[i].onmouseover = function () {
                // console.log( Div_2[this.index].index)
        
            Div_2[this.index].addEventListener("dragstart", function (event) {
                
               
                //dataTransfer.setData()方法设置数据类型和拖动的数据
                event.dataTransfer.setData("Text", event.target.className);

                console.log(event.target.className)
                console.log(event.target)
                console.log(event.target.id)


            });

            //在拖动p元素的同时,改变输出文本的颜色
            document.addEventListener("drag", function (event) {
                  
            });

            // 当拖完p元素输出一些文本元素和重置透明度
            document.addEventListener("dragend", function (event) {
               
                event.target.style.opacity = "1";
            });

            /* 拖动完成后触发 */
            // 当p元素完成拖动进入droptarget,改变div的边框样式
            document.addEventListener("dragenter", function (event) {
                if (event.target.className == "div_1") {
                   
                }
            });

            // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
            document.addEventListener("dragover", function (event) {
                event.preventDefault();
            });
            // 当可拖放的p元素离开droptarget，重置div的边框样式
            document.addEventListener("dragleave", function (event) {
                if (event.target.className == "div_1") {
                    event.target.style.border = "";
                }
            });
           
            
            document.addEventListener("drop", function (event) {
                event.preventDefault();
                if (event.target.className == "div_1") {

                    document.getElementById("demo").style.color = "";   //文字p
                    event.target.style.border = "";
                    var data = event.dataTransfer.getData("Text");

                    console.log(event.target);

                    console.log(document.getElementsByClassName(data)[0])  //拖动对象
                    console.log(data)   //拖动对象的className  （具体看前面定义）
                    event.target.appendChild(document.getElementsByClassName(data)[0]);
                }
            });


        }
    }//for























    //       window.onload=  function (){

    //             // var ul = document.getElementsByClassName("list")[0];
    //             //    var ul_child = ul.getElementsByTagName('li');
    //             var ul_child = document.getElementsByTagName('li');
    //                for (var i = 0; i < ul_child.length; i++) {
    //                    ul_child[i].index = i;
    //                    ul_child[i].onclick = function(){
    //                        var j = this.index;
    //         　               alert("元素索引为" +this.index);
    //         }
    //     }
    // }


</script>



<!-- <script>
    var contanier = document.querySelector('.main-table');
    contanier.addEventListener('dragstart', function (e) {
        for (let el = e.target; el != e.currentTarget; el = el.parentNode) {
            console.log(e.target)
            if (el.className.indexOf('div_1') > -1 || el.className.indexOf('div_2') > -1) {

                break;
            }
        }
    })

</script> -->

</html>